{# SWEN-261 Thomas Heissenberger #}
{% load staticfiles %}
{% load tool_tag %}
<html>
	<title>toolShare</title>
	<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}main.css"> <!--- simple template -->
	<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.4.2/pure-min.css"> <!-- css boilerplate -->
	<div id="top">
		
		<div class="menu">
			{% if user.is_authenticated %} 
				<b style="margin-left: 2em; margin-right: 2em">Welcome {{ user.username }}!</b>
				<!--- we include a menu here! -->
				<a class="pure-button" href="{{ SITE_URL }}/accounts/profile/">Profile</a>
				<a class="pure-button" href="{{ SITE_URL }}/accounts/logout/">Log Out</a>
				<a class="pure-button" href="{{ SITE_URL }}/tools/">Tools</a>
				<a class="pure-button" href="{{ SITE_URL }}/">Home</a>
				<a class="pure-button pure-button-primary" href="{{ SITE_URL }}/notices/">({{user.extendedprofile.stacksize}}) Notifications</a>

			{% else %} <a href="{{ SITE_URL }}/accounts/register/">Register</a> or <a href="{{ SITE_URL }}/accounts/login/">Sign-In</a>{% endif %}
		</div>
		<a href="\"><img src="{{ STATIC_URL }}logo.png" class="logo"></a>
	</div>
	<h2 style="text-align: center; color: black;">Tools</h2>
	<hr>
	<div class="center"> <!-- start of main content -->
		<a class="pure-button" href="{{ SITE_URL }}/tools/browse/" style="margin-left: 2em; margin-right: 2em;">Browse</a>
		<a class="pure-button" href="{{ SITE_URL }}/tools/add/" style="margin-left: 2em; margin-right: 2em;">Add</a>
		<a class="pure-button" href="{{ SITE_URL }}/tools/search/" style="margin-left: 2em; margin-right: 2em;">Search</a>
		<a class="pure-button" href="{{ SITE_URL }}/accounts/profile/" style="margin-left: 2em; margin-right: 2em;">My Inventory</a>
		
		<!-- CURRENTLY DISABLED
		<form action="{{ SITE_URL }}/tools/browse/" method="get">{% csrf_token %}
		    <label for="option-one">
		        <input id="nonlocal" type="checkbox" name="nonlocal" value="1">
		        Include Non-Local Zipcode Items
		    </label>

		    <label for="option-two" class="pure-radio">
		        <input id="asc" type="radio" name="optionsRadios" value="asc" checked>
		        Ascending
		    </label>

		    <label for="option-three" class="pure-radio">
		        <input id="desc" type="radio" name="optionsRadios" value="desc">
		        Descending
		    </label>
		    <input type="submit" value="Submit">
		</form>
		-->

		<div class="list" style="margin: 2em auto; width: 85%; "> 
		
			<table class="pure-table pure-table-horizontal" style="margin-bottom: 3em; width: 100%; ">
				<thead>
					<tr>
						<th>Tool</th>
						<th>Manufacture</th>
						<th>Location</th>
						<th>Zipcode</th>
						<th>Owner</th>
						<th>Quantity Available</th>
						<th>Add Item</th>
						<th>Subtract Item</th>
						<th></th>
						<th></th>
					</tr>
				</thead>

				<tbody>
					{% for tool in tool_list %}
						<tr>
							<td>
								{{ tool.tool_name }} 
								<a href="{{ SITE_URL }}/tools/view/{{tool.tool_name|slugify}}"><img src="{{ STATIC_URL }}tool_pics/{{ tool.tool_name|slugify}}.png" onerror="this.src='{{ STATIC_URL }}tool_pics/unknown.png';" style="height:128px; padding: 1em 1em 1em 1em;"></a>
							</td>
							<td>{{ tool.tool_manufacture }}</td>
							<td>{{ tool.location }}</td>
							<td><b>{{tool.owner.extendedprofile.zipcode}}</b></td>
							<td><b>{{tool.owner}}</b></td>
							<td><div style="background: rgba(0, 0, 0, 0.75); border-radius: 5px; font-weight: bold;">{{ tool.tool_name|colorfy|safe }}</div></td>
							<td><a class="pure-button" href="{{ SITE_URL }}/tools/addone/{{tool.tool_name|slugify}}/">+</a></td>
							<td><a class="pure-button" href="{{ SITE_URL }}/tools/minusone/{{tool.tool_name|slugify}}/">-</a></td>
							<td><a class="pure-button" href="{{ SITE_URL }}/tools/checkout/{{tool.tool_name|slugify}}/">Checkout!</a></td>
							<td>{% if tool.canReturn %}<a class="pure-button" href="{{ SITE_URL }}/tools/return/{{tool.tool_name|slugify}}/">Return!</a> {% endif %}</td>
						</tr>
					{% endfor %}

				</tbody>
			</table>
		</div>
	</div>




</html>